<template>
  <div class="app-role">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-form
          ref="form"
          :model="queryObject"
          :inline="true"
          class=" demo-form-inline"
        >
          <el-form-item label="角色名称" prop="name">
            <el-input v-model="queryObject.name"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button @click="reset" :disabled="isLoading">重置</el-button>
            <el-button type="primary" @click="onSubmit" :disabled="isLoading">提交</el-button>
          </el-form-item>
        </el-form>
      </div>

      <el-button
        type="info"
        size="small"
        @click="addRole"
      >添加角色
      </el-button>

      <div v-loading="isLoading">
        <el-table
          :data="roles"
          border
          style="width: 100%">

          <el-table-column
            type="index"
            label="编号"
            width="80"
            align="center">
          </el-table-column>

          <el-table-column
            prop="name"
            label="角色名称">
          </el-table-column>
          <el-table-column
            prop="code"
            label="角色编码">
          </el-table-column>
          <el-table-column
            prop="description"
            label="描述">
          </el-table-column>
          <el-table-column
            label="添加时间">
            <template slot-scope="scope">
              {{scope.row.createdTime | dateFormat}}
            </template>
          </el-table-column>

          <el-table-column
            label="操作"
            width="180"
            align="center">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="allocMenu(scope.row)">分配菜单</el-button>
              <el-button type="text" size="small" @click="allocResource(scope.row)">分配资源</el-button>
              <br/>
              <el-button type="text" size="small" @click="editRole(scope.row)">修改</el-button>
              <el-button type="text" size="small" @click="deleteRole(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

      </div>

      <create-or-edit
        :dialog-form-visible="isEditing"
        :role-id="editingRoleId"
        @close="cancel"
        @success="afterSave">
      </create-or-edit>

    </el-card>
  </div>
</template>

<script>
  import { deleteRole, getRolePages } from '@/services/role'
  import CreateOrEdit from './components/createOrEdit'

  function formatNumber(x) {
    if (x >= 10) {
      return x
    } else {
      return '0' + x
    }
  }

  export default {
    name: 'RoleIndex',
    data() {
      return {
        queryObject: {
          name: ''
        },
        roles: [],
        isLoading: false,
        isEditing: false,
        editingRoleId: 0,
      }
    },
    created() {
      this.loadRoles()
    },
    methods: {
      async loadRoles() {
        this.isLoading = true
        const { code, data } = await getRolePages(this.queryObject)
        if (code === '000000') {
          this.roles = data.records
        }
        this.isLoading = false
      },
      onSubmit() {
        this.loadRoles()
      },
      reset() {
        this.$refs.form.resetFields()
        this.loadRoles()
      },
      deleteRole(id) {
        const that = this
        this.$confirm('您确定要删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          const { code } = await deleteRole(id)
          if (code === '000000') {
            this.$message.success('删除成功')
            console.log(that)
            that.loadRoles()
          }
        })
      },
      addRole() {
        this.isEditing = true
        this.editingRoleId = undefined
      },
      editRole(row) {
        this.isEditing = true
        this.editingRoleId = row.id
      },
      afterSave() {
        this.isEditing = false
        this.editingRoleId = undefined
        this.loadRoles()
      },
      cancel() {
        this.isEditing = false
        this.editingRoleId = undefined
      },
      allocMenu(row) {
        this.$router.push({
          name: 'alloc-menu',
          params: {
            roleId: row.id,
          }
        })
      },
      allocResource(row) {
        this.$router.push({
          name: 'alloc-resource',
          params: {
            roleId: row.id,
          }
        })
      },
    },
    filters: {
      dateFormat(dateStr) {
        const date = new Date(dateStr)
        return `${date.getFullYear()}-${formatNumber(date.getMonth() + 1)}-${formatNumber(date.getDate())}` +
          ` ${formatNumber(date.getHours())}:${formatNumber(date.getMinutes())}:${formatNumber(date.getSeconds())}`
      }
    },
    components: {
      CreateOrEdit
    }
  }
</script>
